<template>
  <div>
    <div class="modle-box">
      <div style="flex: 0 1 30%">
        <dv-border-box12 style="width: 100%; height: 300px"
          ><div class="title">土壤电导率</div>
          <div ref="soilElecChart" style="width: 550px; height: 300px"></div>
        </dv-border-box12>
        <dv-border-box12 style="width: 100%; height: 300px">
          <div class="title">温度</div>
          <div ref="temperatureChart" style="width: 550px; height: 300px"></div>
        </dv-border-box12>
      </div>

      <div style="flex: 0 1 40%">
        <dv-border-box12 style="width: 100%; height: 190px" class="time">
          <div class="update-time">最新数据更新时间</div>
          <div class="time-box"><span>2024-07-24 17:36:37</span></div>
          <div class="tran-num">传感器数</div>
          <dv-decoration-9
            style="width: 120px; height: 120px"
            class="transducer"
          >
            <div color-green font-600 class="d9" bg="~ dark/0">66</div>
          </dv-decoration-9>
        </dv-border-box12>
        <dv-border-box8 style="width: 100%; height: 400px"
          ><div class="title">气象站最新数据展示</div>
          <div class="main-weather-content">
            <div v-for="item in imageAndDesc" :key="item">
              <div class="images">
                <img class="item-img" :src="item.url" />
                <div class="block">
                  <span
                    v-for="values in item.value"
                    :key="values"
                    class="demonstration"
                    >{{ values }}</span
                  >
                </div>
                <div class="block">
                  <span
                    v-for="descs in item.desc"
                    :key="descs"
                    class="demonstration"
                    >{{ descs }}</span
                  >
                </div>
              </div>
            </div>
          </div>
        </dv-border-box8>
      </div>

      <div style="flex: 0 1 30%">
        <div class="weather">鄱阳县 晴 37℃</div>
        <dv-border-box12 style="width: 100%; height: 200px"
          ><div class="title">风速风向</div>
          <img src="../../public/img/direction.png" class="direction" alt="" />
          <div class="wind-speed wind">Wind Speed</div>
          <div class="wind-content">
            <span>1.4</span>
            <span>m/s</span>
          </div>
          <img src="../../public/img/wind1.png" class="wind-img" />
          <div class="wind-dec wind">西风</div>
        </dv-border-box12>
        <dv-border-box12 style="width: 100%; height: 350px"
          ><div class="title">光照强度</div>
          <div ref="lightChart" style="width: 600px; height: 350px"></div>
        </dv-border-box12>
      </div>
    </div>
  </div>
</template>

<script setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";

const soilElecChart = ref();
function initSoilElecChart() {
  // 初始化echarts实例
  let myChart = echarts.init(soilElecChart.value);
  let option = {
    title: {
      text: "单位us/cm",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    color: "#8dbc3d",
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["土壤导电率"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    xAxis: {
      data: [
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
        "22点",
        "23点",
      ],
      name: "时刻",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      yAxis: {
        type: "value",
        max: 250, //最大值
        min: 0, //最小值
        interval: 50, //间隔
      },
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "土壤导电率",
        type: "bar",
        data: [123, 132, 234, 231, 200, 211, 234, 235, 234],
      },
    ],
  };

  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option);
}

const temperatureChart = ref();
function initTemperatureChart() {
  let myChart = echarts.init(temperatureChart.value);
  let option = {
    title: {
      text: "单位：°C",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    tooltip: {
      trigger: "axis",
    },
    legend: {
      data: ["空气温度", "土壤温度"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },

    toolbox: {},
    xAxis: {
      type: "category",
      name: "时刻",
      boundaryGap: false,
      axisLabel: {
        interval: 0,
      },
      data: [
        "11点",
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
      ],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      max: 40,
      min: 0,
      interval: 10,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    series: [
      {
        name: "空气温度",
        type: "line",
        data: [32, 33, 34, 36, 34, 33, 33, 32, 32, 33],
      },
      {
        name: "土壤温度",
        type: "line",
        stack: "Total",
        data: [34, 34, 35, 36, 37, 34, 35, 32, 30, 25],
      },
    ],
  };
  myChart.setOption(option);
}

const lightChart = ref();
function initLightChart() {
  let myChart = echarts.init(lightChart.value);
  let option = {
    title: {
      text: "单位：lx",
      x: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    legend: {
      data: ["光照强度"],
      right: "4%",
      textStyle: {
        color: "#fff",
      },
    },
    color: "#fdd601",
    tooltip: {
      trigger: "axis",
    },

    toolbox: {},
    xAxis: {
      data: [
        "12点",
        "13点",
        "14点",
        "15点",
        "16点",
        "17点",
        "18点",
        "19点",
        "20点",
        "21点",
      ],
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
      name: "时刻",
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    yAxis: {
      type: "value",
      max: 100000,
      min: 0,
      interval: 20000,
      axisLine: {
        lineStyle: {
          color: "#fff",
        },
      },
    },
    grid: {
      left: "5%",
      containLabel: true,
    },
    series: [
      {
        name: "光照强度",
        data: [80000, 90000, 95000, 95000, 60000, 58000, 53000, 0, 0, 0],
        type: "line",
        smooth: true,
      },
    ],
  };
  myChart.setOption(option);
}

onMounted(() => {
  initSoilElecChart();
  initTemperatureChart();
  initLightChart();
});

const imageAndDesc = {
  item1: {
    url: "../../public/img/conduct.png",
    value: "250us/cm",
    desc: "土壤电导率",
  },
  item2: {
    url: "../../public/img/co2.png",
    value: "432ppm",
    desc: "CO2浓度",
  },
  item3: {
    url: "../../public/img/PM2.png",
    value: "0.05ug/m3",
    desc: "PM2.5",
  },
  item4: {
    url: "../../public/img/sunlight.png",
    value: "10153tx",
    desc: "光照强度",
  },
  item5: {
    url: "../../public/img/wind.png",
    value: "8.9m/s",
    desc: "风速",
  },
  item6: {
    url: "../../public/img/soiltem.png",
    value: "25.5℃",
    desc: "土壤温度",
  },
  item7: {
    url: "../../public/img/soilhum.png",
    value: "35.4%rh",
    desc: "土壤湿度",
  },
  item8: {
    url: "../../public/img/airtem.png",
    value: "0°C",
    desc: "空气湿度",
  },
  item9: {
    url: "../../public/img/airhum.png",
    value: "97.6%rh",
    desc: "空气湿度",
  },
  item10: {
    url: "../../public/img/rain.png",
    value: "0.2mm",
    desc: "降雨量",
  },
};
</script>

<style lang="scss" scoped>
.title {
  font-size: 20px;
  font-weight: bolder;
  padding-top: 10px;
  color: #6ecde4;
}

.transducer {
  position: absolute;
  right: 30px;
  top: 30%;
}

.tran-num {
  position: absolute;
  right: 50px;
  top: 20px;
  font-size: 20px;
}

.d9 {
  font-size: 20px;
  text-shadow: 0 0 3px #7acaec;
  position: absolute;
}

.update-time {
  position: absolute;
  left: 5%;
  top: 30px;
  font-size: 20px;
}

.weather {
  font-size: 30px;
  font-weight: bolder;
  color: #00bfff;
}

.time-box {
  position: absolute;
  width: 70%;
  height: 100px;
  left: 5%;
  top: 35%;
  background-color: #00bfff;
  border-radius: 20px;
  span {
    font-size: 40px;
    line-height: 100px;
  }
}

.main-weather-content {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 10px;
  width: 100%;
  height: 100%;
  border: 2px solid transparent;
  animation: borderFlow 1s infinite;
}

.images {
  display: flex;
  margin-top: 15px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.item-img {
  display: block;
  width: 70px;
  height: 70px;
}

.wind-speed {
  position: absolute;
  width: 300px;
  height: 30px;
  line-height: 30px;
  background-color: #00bfff;
  right: 20px;
  font-size: 20px;
  font-weight: bolder;
}

.wind-dec {
  position: absolute;
  width: 300px;
  height: 30px;
  line-height: 30px;
  background-color: #00bfff;
  right: 20px;
  bottom: 20px;
  font-size: 20px;
  font-weight: bolder;
}

.wind-img {
  position: absolute;
  right: 40px;
  animation: spin 1s linear infinite; /* 每圈1秒，无限循环 */
  width: 50px;
  top: 43%;
}

.wind-content {
  position: absolute;
  line-height: 140px;
  right: 35%;
}

.wind-content :nth-child(1) {
  font-size: 50px;
  color: #ff8888;
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

.direction {
  position: absolute;
  left: 4%;
  width: 230px;
  bottom: 7%;
}
</style>
